<script lang="ts" setup>
/**
 * 支持element-plus图标以及网络图标
 * 网络图标可以参考以下两个链接
 * https://icones.js.org/collection/all
 * https://icon-sets.iconify.design
 */
import {Icon} from '@iconify/vue'
import {computed} from 'vue'

type TIcon = {
	icon: string,
	color?: string,
	size?: number
}
const props = withDefaults(defineProps<TIcon>(), {
	size: 16
})

const isUpperCase = computed(() => {
	return /^[A-Z]/.test(props.icon)
})
</script>

<template>
	<el-icon :color="color" :size="size">
		<template v-if="isUpperCase">
			<component :is="icon"/>
		</template>
		<Icon v-else :icon="icon"/>
	</el-icon>
</template>

<style lang="scss" scoped></style>
